<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>评论管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-row :gutter="25">
        <el-col :span="6">
          <div class="input-span-wrapper">
            <span>评价：</span>
            <el-input placeholder="请输入关键词" clearable v-model="keyword"></el-input>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="input-span-wrapper">
            <span>买家昵称：</span>
            <el-input placeholder="请输入买家昵称" clearable v-model="nickName">
            </el-input>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="input-span-wrapper">
            <span>订单编号：</span>
            <el-input placeholder="请输入订单编号" clearable v-model="orderId">
            </el-input>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="input-span-wrapper">
            <span>商品名称：</span>
            <el-input placeholder="请输入商品名称" clearable v-model="flowerName">
            </el-input>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="50">
        <el-col :span="12">
          <div class="input-span-wrapper" id="timeDiv">
            <span>评价时间：</span>
            <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="startTime" type="date"
                            placeholder="选择日期"></el-date-picker>
            至
            <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="endTime" type="date"
                            placeholder="选择日期"></el-date-picker>
            <el-button type="primary" @click="searchComment" round>搜索</el-button>
            <el-button  @click="resetForm" round>重置</el-button>
          </div>
        </el-col>
      </el-row>


      <el-table
          :data="commentList"
          border
          style="width: 100%">
        <el-table-column prop="contentId" label="评论编号" align="center"></el-table-column>
        <el-table-column label="评分" align="center">
          <template slot-scope="scope">
            <el-rate
                v-model="scope.row.rateScore"
                disabled
                text-color="#ff9900">
            </el-rate>
          </template>
        </el-table-column>
        <el-table-column label="评价内容">
          <template slot-scope="scope">
            <div>
              <p>{{ scope.row.content }}</p>
              <el-image
                  style="width: 100px; height: 100px"
                  :src="img+scope.row.commentImg"
                  :fit="fit"></el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="商品信息">
          <template slot-scope="scope">
            <div>
              <p>{{ scope.row.flowerName }}</p>
              <p>订单号：{{ scope.row.orderId }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="nickName" label="评价人" align="center"></el-table-column>
        <el-table-column
            prop="createTime"
            label="评论时间"
            align="center">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" align="center"></el-table-column>
        <el-table-column prop="isDelete" label="评论状态" :formatter="statusFormatter" align="center"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="danger" @click="removeCommentById(scope.row)">删除</el-button>
            <el-button type="primary" @click="replyCommentById(scope.row)">恢复</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <div align="center">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  name: "FlowerCommentView",
  data() {
    return {
      img: "http://localhost:8088/image/Test/",
      input3: '',
      select: '',
      keyword: '',
      nickName: '',
      orderId: '',
      flowerName: '',
      fit: 'contain',
      startTime: '',
      endTime: '',
      isSearching: false,
      searchInput: '',
      commentList: [],
      pageSize: 5,
      pageNum: 1,
      total: 0,
    }
  },
  created() {
    this.initCommentList();
  },
  methods: {
    getCommentList(url, params) {
      this.$axios.get(url, {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          ...params
        }
      }).then((res) => {
        if (res.data.code === 200) {
          this.commentList = res.data.data.list;
          this.total = res.data.data.total;
          this.pageNum = res.data.data.pageNum;
          this.pageSize = res.data.data.pageSize;
        }
      })
    },
    initCommentList() {
      let url = "/flowerComment/findAllFlowerComments";
      this.getCommentList(url, {});
    },

    searchComment() {
      // 根据需要更新 searchInput 的值
      let url = "/flowerComment/findAllFlowerCommentsByConditions";
      this.getCommentList(url, {
        keyword: this.keyword,
        nickName: this.nickName,
        orderId: this.orderId,
        flowerName: this.flowerName,
        startTime: this.startTime,
        endTime: this.endTime
      });
      this.isSearching = true;
    },

    resetForm() {
      this.keyword = '';
      this.nickName = '';
      this.orderId = '';
      this.flowerName = '';
      this.startTime = '';
      this.endTime = '';
    },

    handleSizeChange(val) {
      this.pageSize = val;
      if (this.isSearching) {
        this.searchComment();
      } else {
        this.initCommentList();
      }
    },

    handleCurrentChange(val) {
      this.pageNum = val;
      if (this.isSearching) {
        this.searchComment();
      } else {
        this.initCommentList();
      }
    },

    statusFormatter(row, column, cellValue) {
      if (cellValue === 0) {
        return '正常';
      } else if (cellValue === 1) {
        return '已删除';
      } else {
        return '被举报';
      }
    },

    removeCommentById(row) {
      let url = "/flowerComment/deleteFlowerComment";
      let params = new URLSearchParams();
      params.append("contentId", row.contentId);
      this.$axios.put(url, params).then(res => {
        if (res.data.code === 200) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.searchComment();
        } else {
          this.$message({
            type: 'error',
            message: '删除失败!'
          });
        }
      })
    },
    replyCommentById(row) {
      let url = "/flowerComment/replyFlowerComment";
      let params = new URLSearchParams();
      params.append("contentId", row.contentId);
      this.$axios.put(url, params).then(res => {
        if (res.data.code === 200) {
          this.$message({
            type: 'success',
            message: '恢复成功!'
          });
          this.searchComment();
        } else {
          this.$message({
            type: 'error',
            message: '恢复失败!'
          });
        }
      })
    }
  }
}

</script>
<style>
.input-span-wrapper {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

.input-span-wrapper el-input {
  margin-right: 10px; /* 调整间距以满足需求 */
}

#timeDiv {
  margin-top: 20px;
}


</style>